<template>
	<view>
		<view class="fixed">
			<u-search shape="round" placeholder="报修编号/设备编号/设备名称/型号" v-model="keyword">
			</u-search>

		</view>
		<view class="screen">
			<view class="state location" @click="open(1)">
				<span>{{statusText}}</span>
				<u-icon name="arrow-down-fill" color="#1a1b1c" size="8"></u-icon>
			</view>
			<view class="extent location" @click="open(2)">
				<span>设备类型</span>
				<u-icon name="arrow-down-fill" color="#1a1b1c" size="8"></u-icon>
			</view>
			<view class="place location" @click="location">
				<span>所在位置</span>
				<u-icon name="arrow-down-fill" color="#1a1b1c" size="8"></u-icon>
			</view>
		</view>
		<!-- ------------------------------------------------------------ -->
		<!-- 图片压缩机界面 -->
		<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" v-if="sbBox.length == 0">
		</u-empty>
		<view class="" v-else>
			<template>
				<view class="state-box" v-for="(item,index) in sbBox" :key="index">
					<view @click="tz1(item.taskId)">
						<view class="headline">
							任务名称：{{item.taskName}}
						</view>
						<view class="information">
							任务编码：{{item.taskCode}}
						</view>
						<view class="information">
							任务类型：{{item.taskType == '1' ? '保养' : '点检'}}
						</view>
						<view class="information">
							预计开始时间：{{item.planStartTime}}
						</view>
						<view id="state-show">
							<text id="text1"
								:class="{zero:item.status == '未开始',one:item.status == '进行中',two:item.status == '已完成',three:item.status == '已超时',four:item.status == '超时完成'}">{{item.status}}</text>
						</view>
					</view>
					<view class="" v-if="item.status == '未开始'" @click="openTask(item.taskId,item.planStartTime,item.planEndTime,'1')">
						<view class="verification verification1" style="width: 100%">
							开始保养任务
						</view>
					</view>
					<view class="" v-if="item.status == '进行中'" @click="openTask(item.taskId,item.planStartTime,item.planEndTime,'2')">
						<view class="verification verification1" style="width: 100%">
							结束任务
						</view>
					</view>
				</view>
			</template>
		</view>

		<!-- --------------------- -->
		<!-- 弹出层 -->
		<u-popup :show="task" mode="center" @close="close" style="height: 512rpx;">
			<template>
				<view class="popup-header" style="margin-bottom: 50rpx;">
					提示
				</view>
				<image src="../../../static/images/index/gantanhao.png"
					style="width: 96rpx;height: 96rpx;margin: 0 auto;" mode=""></image>
				<view class="" style="font-size: 32rpx;text-align: center;color: #202540;margin-top: 64rpx;">
					确定吗?
				</view>
				<view class="button" @click="start">
					确定
				</view>
			</template>
		</u-popup>

		<view style="display: flex;flex-direction:column-reverse">
			<u-popup :show="show" mode="center" @close="close">
				<template>
					<view class="popup-header djc">
						点检状态
					</view>
					<view class=""
						style="display: flex; justify-content: space-between;margin: 0 32rpx;flex-wrap: wrap;">
						<view class="u-page__tag-item" v-for="(item, index) in checkboxs" :key="index">
							<u-tag :text="item.dictLabel" :plain="!item.checked" type="warning" :name="index"
								@click="radioClick">
							</u-tag>
						</view>
					</view>

					<!-- 确定按钮 -->
					<view class="button" @click="Status">
						确定
					</view>
				</template>
			</u-popup>

			<!-- 设备类型 -->
			<u-popup :show="show2" mode="center" @close="close" class="shebei">
				<template>
					<view class="popup-header" style="margin-bottom: 12rpx;">
						设备类型
					</view>

					<view class="container">
						<u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange"
							shape="circle" iconPlacement="right" activeColor="#38AFFF">
							<u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in checkboxList2"
								:key="index" :label="item.name" :name="item.name">
							</u-checkbox>
						</u-checkbox-group>
					</view>
					<!-- 确定按钮 -->
					<view class="button">
						确定
					</view>
				</template>
			</u-popup>
			<!-- ---------------------------- -->
			<!-- 所在位置 -->
			<u-popup :show="show1" mode="center" @close="close" class="weizi">
				<template>
					<view class="popup-header">
						所在位置
					</view>
					<view class="search">
						<u-search placeholder="位置名称" v-model="keyword"></u-search>
					</view>
					<view class="container">
						<u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange"
							shape="circle" iconPlacement="right" activeColor="#38AFFF">
							<u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in checkboxList1"
								:key="index" :label="item.name" :name="item.name">
							</u-checkbox>
						</u-checkbox-group>
					</view>
					<!-- 确定按钮 -->
					<view class="button">
						确定
					</view>
				</template>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import {
		getTaskList,
		putTaskList
	} from "@/api/facilityPatrol/index.js"
	import {
		getDicts
	} from "@/api/system/dict/data.js"
	export default {
		data() {
			return {

				statusText: '保养状态',
				index: '', //点击状态拿到下标
				sbBox: [],
				total: '', //总条数
				// 分页和查询
				page: {
					taskType:'1',//1是保养
					status: '', //状态
					pageNum: 1,
					pageSize: 10
				},
				// 位置得数据
				checkboxValue1: [],
				// 基本案列数据
				checkboxList1: [],

				checkboxList2: [],
				task: false, //任务弹框
				taskObj:{
					taskId: '',
					startTime:'',//开始时间
					endTime:'',//结束时间
					status:'',
					planStartTime:'',
					planEndTime:''
				},
				
				show2: false, //状态
				show1: false, //所在位置弹出层
				show: false, //弹出层
				keyword: '',
				checkboxs: []
			}
		},
		onLoad(options) {
			this.page.status = options.status
			this.getTaskList()
		},
		methods: {
			// 确定开始
			start() {
				const currentDate = new Date();
				const year = currentDate.getFullYear();
				const month = (currentDate.getMonth() + 1).toString().padStart(2, '0');
				const day = currentDate.getDate().toString().padStart(2, '0');
				const hours = currentDate.getHours().toString().padStart(2, '0');
				const minutes = currentDate.getMinutes().toString().padStart(2, '0');
				const seconds = currentDate.getSeconds().toString().padStart(2, '0');
				const formattedDate = `${year}-${month}-${day}`;
				const formattedTime = `${hours}:${minutes}:${seconds}`;
				if(this.taskObj.status == '1'){
					this.taskObj.startTime = formattedDate + " " + formattedTime;
				}else{
					this.taskObj.endTime = formattedDate + " " + formattedTime;
				}
				putTaskList(this.taskObj).then(res=>{
					this.close()
					this.taskObj={
					taskId: '',
					startTime:'',//开始时间
					endTime:'',//结束时间
					status:'',
					planStartTime:'',
					planEndTime:''
				},
					uni.$u.toast(res.msg)
					this.getTaskList()
				})
			},
			// 打开开始弹框
			openTask(taskId,planStartTime,planEndTime,status) {
				this.taskObj.taskId = taskId
				this.taskObj.planStartTime = planStartTime
				this.taskObj.planEndTime = planEndTime
				this.taskObj.status = status
				this.task = true
			},
			// 获取点巡检设备
			getTaskList() {
				// 设备点检状态
				this.checkboxs = []
				getDicts('dv_task_status').then(options => {
					options.data.forEach(item => {
						this.checkboxs.push({
							dictLabel: item.dictLabel,
							dictValue: item.dictValue,
							checked: false
						})
					})
				})
				setTimeout(()=>{
					getTaskList(this.page).then(res => {
						this.total = res.total
						this.sbBox = res.rows
						this.sbBox.forEach(item => {
							this.checkboxs.forEach(k => {
								// 替换展示中文状态
								if (item.status == k.dictValue) {
									item.status = k.dictLabel
								}
							})
						})
					})
				},100)
			},
			tz1(taskId) {
				uni.navigateTo({
					url: `/pages/facilityPatrol/xunjian/xunjian?taskId=${taskId}`
				})
			},
			tz2() {
				uni.navigateTo({
					url: '/pages/facilityPatrol/jianchahuibao/jianchahuibao'
				})
			},
			// 关闭弹出层
			close() {
				this.show = false
				this.show1 = false
				this.show2 = false
				this.task = false
			},
			// 打开弹出层
			open(id) {
				if (id == 1) {
					this.show = true
				} else {
					this.show2 = true
				}
			},
			open2() {

			},
			// 弹出层标签点击事件
			radioClick(name) {
				this.checkboxs.map((item, index) => {
					item.checked = index === name ? true : false
				})
				this.index = name
			},
			// 筛选点检状态
			Status() {
				this.statusText = this.checkboxs[this.index].dictLabel
				this.page.status = this.checkboxs[this.index].dictValue
				this.getTaskList()
				this.close()
			},
			// 所在位置弹出层
			location() {
				this.show1 = true
			},

			// 多选按钮
			checkboxChange(n) {
				console.log('change', n);
			},
			// 上拉加载
			onReachBottom() {
				//触发了上拉加载，请求下一页（10）条数据
				let allTotal = this.page.pageNum * this.page.pageSize
				if (allTotal < this.total) {
					// 判断当前条数小于总条数
					this.page.pageNum++
					this.getTaskList()
				} else {
					uni.showToast({
						title: '已加载全部数据！',
						icon: 'none'
					})
				}

			},

			// 下拉刷新
			onPullDownRefresh() {
				this.page.pageNum = 1
				this.page.pageSize = 10
				this.sbBox = []
				// 调用获取数据的方法
				this.getTaskList()
				setTimeout(() => {
					// 结束下拉刷新
					uni.stopPullDownRefresh();
				}, 1000)
			},
		}
	}
</script>

<style lang="scss">
	
	.image {
		position: absolute;
		top: 25%;
		left: 45%;
	}

	.text {
		position: absolute;
		top: 39%;
		left: 47%;
		color: rgba(0, 0, 0, 1);
	}

	::v-deep .weizi {
		.u-popup__content {
			height: 1048rpx !important;
		}

		.u-checkbox {
			margin-bottom: 48rpx !important;
		}
	}

	::v-deep .shebei {
		.u-popup__content {
			height: 930rpx !important;
		}

		.u-checkbox {
			margin-bottom: 48rpx !important;
			margin-top: 20rpx !important;
		}
	}

	.container {
		height: 660rpx;
		/* 设置容器的固定高度 */
		overflow: auto;
		/* 添加滚动条 */
	}

	// 多选框得边框颜色
	::v-deep .u-checkbox__icon-wrap--circle {
		border-color: rgba(56, 175, 255, 1) !important;
	}

	::v-deep .u-checkbox-group--column {
		padding: 0 32rpx;
	}

	.search {
		padding: 0 32rpx 12rpx 32rpx;
		box-shadow: 0px 2rpx 4rpx rgba(32, 37, 64, 0.06);
		margin-bottom: 60rpx;
		margin-top: -40rpx;
	}

	.button {
		margin: 50rpx auto;
		width: 490rpx;
		height: 64rpx;
		opacity: 1;
		border-radius: 60rpx;
		background: linear-gradient(90deg, rgba(56, 222, 255, 1) 0%, rgba(56, 175, 255, 1) 100%);
		font-size: 32Rpx;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 64rpx;
		color: rgba(255, 255, 255, 1);
		text-align: center;
	}

	.popup-header {
		// background: (90deg, rgba(231, 94, 255, 1) 0%, rgba(172, 51, 193, 1) 100%);
		margin: 0 32rpx 48rpx 32rpx;
		border-bottom: 0.5px solid #f2f2f4;
		height: 86rpx;
		line-height: 86rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: 400;
	}

	// -------------------------------
	// 弹出层样式
	.u-page__tag-item {
		display: flex;
	}

	.u-transition {
		// padding: 24rpx !important;
	}

	::v-deep .u-page__tag-item {
		width: 160rpx !important;
		display: inline-block !important;

		uni-view {
			justify-content: center !important;
		}
	}

	::v-deep .u-tag--warning--plain {
		// border-radius: 12rpx;
		width: 160rpx !important;
		border: 0rpx solid #38d6ff !important;
		margin-bottom: 32rpx !important;
		height: 64rpx !important;
	}

	::v-deep .u-tag--warning {
		// opacity: 0.1;
		background-color: #fff !important;
		border-width: 1px !important;
		border-color: #38d6ff !important;
		margin-bottom: 32rpx !important;
		height: 64rpx !important;
	}

	::v-deep .u-tag__text--warning {
		color: #38d6ff !important;
		font-size: 32rpx !important;
	}

	::v-deep .u-tag--square {
		width: 162rpx !important;
		border-radius: 6px !important;
		font-size: 32rpx !important;
	}

	::v-deep .u-tag__text--warning--plain {
		color: #202540 !important;
		font-size: 32rpx !important;
		margin: 0 auto !important;

	}

	// --------------------------------------------
	.fixed {
		z-index: 100;
		width: 100%;
		opacity: 1;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 1px 2px rgba(32, 37, 64, 0.06);
		padding: 12rpx 32rpx;
		position: fixed !important;
	}

	.screen {
		padding-top: 140rpx;
		margin-bottom: 40rpx;
		display: flex;
		justify-content: space-around;

		.location {
			display: flex;
		}

		.u-icon {
			margin-left: 10rpx;
			padding-top: 4rpx;
		}
	}

	.state-box {
		margin: 0 32rpx 48rpx 32rpx;
		padding: 48rpx 32rpx 32rpx 32rpx;
		// height: 450rpx;
		opacity: 1;
		border-radius: 20rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 0px 20rpx rgba(32, 37, 64, 0.06);

		.information {
			opacity: 0.3;
			/** 文本1 */
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(0, 0, 0, 1);
		}

		.headline {
			height: 38rpx;
			opacity: 1;
			/** 文本1 */
			font-size: 32rpx;
			font-weight: 700;
			letter-spacing: 0px;
			line-height: 38rpx;
			color: rgba(32, 37, 64, 1);
			text-align: left;
			vertical-align: top;

		}

		.headline-button {
			left: 542rpx;
			top: 48rpx;
			width: 112px;
			height: 36px;
			opacity: 1;
			border-radius: 8rpx;
			background: linear-gradient(90deg, rgba(255, 87, 51, 0.1) 0%, rgba(212, 39, 0, 0.1) 100%);

		}

		.zero {
			background-color: #f4f4f5;
			color: #909399;
		}

		.one {
			background-color: #e8f4ff;
			color: #1890ff;
		}

		.two {
			background-color: #e7faf0;
			color: #13ce66;
		}

		.three {
			background-color: #ffeded;
			color: #ff4949;
		}

		.four {
			background-color: #fff8e6;
			color: #ffbf4a;
		}

		#state-show {
			display: flex;
			text-align: center;
			line-height: 38rpx;
			width: 500rpx;
			height: 32rpx;
			opacity: 1;
			border-radius: 8rpx;
			font-size: 1px;
			margin-left: 8rpx;

			text {
				text-align: center;
				line-height: 36rpx;
				width: 112rpx;
				height: 36rpx;
				opacity: 1;
				border-radius: 8rpx;


				font-size: 20rpx;
				margin-left: 20rpx;
			}

		}




		.verification {
			display: inline-block;
			height: 64rpx;
			opacity: 1;
			border-radius: 60rpx;
			margin-bottom: 0 !important;
			font-size: 32rpx;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 64rpx;
			text-align: center;
			vertical-align: top;
		}

		.verification1 {
			background: linear-gradient(90deg, rgba(56, 222, 255, 1) 0%, rgba(56, 175, 255, 1) 100%);
			width: 390rpx;
			color: rgba(255, 255, 255, 1);
		}


		view {
			margin-bottom: 32rpx;
		}
	}
	::v-deep .u-popup{
		height: 0 !important;
	}
	::v-deep .u-popup__content {
		width: 686rpx;
		height: 538rpx;
		opacity: 1;
		border-radius: 20rpx;
		background: rgba(255, 255, 255, 1);
	}

	::v-deep .weizi .u-popup__content {
		height: 1000rpx !important;
	}

	::v-deep .u-page__tag-item uni-view {
		width: 80px !important;
		justify-content: center !important;
	}

	::v-deep .u-tag__text--warning {

		font-size: 14px !important;
	}

	::v-deep .uni-input-placeholder {
		height: 17px;
		position: absolute;
		top: auto !important;
		left: 0;
		color: grey;
		overflow: hidden;
		text-overflow: clip;
		white-space: pre;
		word-break: keep-all;
		pointer-events: none;
		line-height: 18px;
	}
</style>